<%--
  Created by IntelliJ IDEA.
  User: 柚木
  Date: 2022/12/28
  Time: 15:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/includePage.css">
    <link rel="stylesheet" href="css/selfInfoPage.css">
    <script src="https://kit.fontawesome.com/e91f25b25e.js" crossorigin="anonymous"></script>
    <title>图书管理系统-个人账户</title>
</head>

<%@ include file="IncludePage.jsp"  %>

<div class="info-nav-top">
    <div class="top-link checked" id="current-borrow-link">当前借阅</div>
    <div class="top-link" id="reservation-link">预约</div>
    <div class="top-link" id="debt-link">我的欠款</div>
    <div class="top-link" id="selfInfo-link">个人资料</div>
    <div class="top-link" id="history-borrow-link">历史借阅</div>
</div>


<%--当前借阅--%>
<div class="self-page-item" id="currentBorrow">
    <table class="current-borrow-table">
        <tr>
            <th class="col0"></th>
            <th class="col1">序号</th>
            <th class="col2">书名</th>
            <th class="col3">作者</th>
            <th class="col4">借阅日期</th>
            <th class="col5">到期日期</th>
            <th class="col6">操作</th>
        </tr>
        <tr>
            <td><input type="checkBox"></td>
            <td>01</td>
            <td>《三体》</td>
            <td>刘慈欣</td>
            <td>2022.12.28</td>
            <td>2023.1.28</td>
            <td>
                <%--                <button class="action-btn">归还</button>--%>
                <button class="action-btn" id="xujie-btn">续借</button>
            </td>
        </tr>
        <tr>
            <td><input type="checkBox"></td>
            <td>03</td>
            <td>《人间词话》</td>
            <td>王国维</td>
            <td>2022.12.29</td>
            <td>2023.1.29</td>
            <td>
                <%--                <button class="action-btn">归还</button>--%>
                <button class="action-btn">续借</button>
            </td>
        </tr>
        <tr>
            <td><input type="checkBox"></td>
            <td>02</td>
            <td>《解忧杂货店》</td>
            <td>东野圭吾</td>
            <td>2022.12.29</td>
            <td>2023.1.29</td>
            <td>
                <%--                <button class="action-btn">归还</button>--%>
                <button class="action-btn">续借</button>
            </td>
        </tr>

    </table>
    <div class="select-btns">
        <%--        <button class="select-btn">归还</button>--%>
        <%--        <button class="select-btn">续借</button>--%>
    </div>
</div>
<%--历史借阅--%>
<div class="self-page-item" id="historyBorrow">
    <table class="history-borrow-table">
        <tr>
            <th class="col0"></th>
            <th class="col1">序号</th>
            <th class="col2">书名</th>
            <th class="col3">作者</th>
            <th class="col4">借阅日期</th>
            <th class="col5">归还日期</th>
            <th class="col6">操作</th>
        </tr>
        <tr>
            <td><input type="checkBox"></td>
            <td>01</td>
            <td>《你是那人间四月天》</td>
            <td>林徽因</td>
            <td>2022.10.11</td>
            <td>2022.10.18</td>
            <td>
                <button class="action-btn" id="delete1">删除</button>
                <%--                <button class="action-btn">续借</button>--%>
            </td>
        </tr>
        <tr>
            <td><input type="checkBox"></td>
            <td>02</td>
            <td>《文化苦旅》</td>
            <td>余秋雨</td>
            <td>2022.11.11</td>
            <td>2022.11.28</td>
            <td>
                <button class="action-btn" id="delete2">删除</button>
                <%--                <button class="action-btn">续借</button>--%>
            </td>
        </tr>
        <tr>
            <td><input type="checkBox"></td>
            <td>03</td>
            <td>《遇见未知的自己》</td>
            <td>张德芬</td>
            <td>2022.11.29</td>
            <td>2022.12.19</td>
            <td>
                <button class="action-btn" id="delete3">删除</button>
                <%--                <button class="action-btn">续借</button>--%>
            </td>
        </tr>

    </table>
    <div class="select-btns">
        <%--        <button class="select-btn">删除</button>--%>
        <%--        <button class="select-btn">续借</button>--%>
    </div>

</div>
<%--预约--%>
<div class="self-page-item" id="reservation">
    <table class="reservation-table">
        <tr class="table-title">
            <th class="col0"></th>
            <th class="col1">序号</th>
            <th class="col2">书名</th>
            <th class="col3">作者</th>
            <th class="col4">类别</th>
            <th class="col5">描述</th>
            <th class="col6">操作</th>
        </tr>
        <tr>
            <td><input type="checkBox"></td>
            <td>01</td>
            <td>《月亮与六便士》</td>
            <td>毛姆</td>
            <td>小说</td>
            <td>难道做自己想做的事，生活在让你感到舒服的环境里，让你的内心得到安宁是糟践自己吗？</td>
            <td>
                <label class="action-label">无库存</label>
                <button class="action-btn gray">续借</button>
            </td>
        </tr>
        <tr>
            <td><input type="checkBox"></td>
            <td>02</td>
            <td>《时间简史》</td>
            <td>史蒂芬·霍金</td>
            <td>科学</td>
            <td>当代物理学有关宇宙组成、创生和演化的权威总结。</td>
            <td>
                <label class="action-label">无库存</label>
                <button class="action-btn gray">续借</button>
            </td>
        </tr>
        <tr>
            <td><input type="checkBox"></td>
            <td>03</td>
            <td>《人间失格》</td>
            <td>太宰治</td>
            <td>小说</td>
            <td>十全十美的文章和彻头彻尾的绝望。</td>
            <td>
                <label class="action-label">无库存</label>
                <button class="action-btn gray">续借</button>
            </td>
        </tr>

    </table>
    <div class="select-btns">
        <%--        <button class="select-btn gray">续借</button>--%>
    </div>

</div>
<%--个人信息--%>
<div class="self-page-item" id="accountInfo">
    <div class="info-border">
        <div class="info-image">
            <div class="head-image">
                <img src="../../images/headImage.jpeg" alt="你的头像">
            </div>
            <div class="image-upload-btn">
                <button class="btn upload-image-btn">上传头像</button>
            </div>
        </div>
        <form action="#" class="info-form">
            <div class="info-form-item">
                <label class="item-label">用户名:</label>
                <input type="text" class="item-input" id="username-input" readonly="readonly" value="张三">
            </div>
            <div class="info-form-item">
                <label class="item-label">密码:</label>
                <input type="password" class="item-input" id="password-input" readonly="readonly" value="123456">
            </div>
            <div class="info-form-item">
                <label class="item-label">学号:</label>
                <input type="text" class="item-input" id="studentId-input" readonly="readonly" value="8209210299">
            </div>
            <div class="info-form-item">
                <label class="item-label">身份:</label>
                <input type="radio" name="status" class="item-radio" id="user-radio" disabled="disabled" value="0" checked="checked">用户
                <input type="radio" name="status" class="item-radio" id="manager-radio" disabled="disabled" value="1">管理员
            </div>
            <button class="btn confirm-edit-btn gray" id="submit-edit-btn">提交</button>
            <button class="btn cancel-edit-btn gray" id="cancel-edit-btn">取消</button>
        </form>
        <div class="bottom-info">
            <button class="btn edit-self-info-btn" id="edit-self-info">编辑个人信息</button>
            <button class="btn myBook-btn" id="myBook-btn">我的借阅</button>
            <label class="bottom-label">&nbsp;&nbsp;图书在借:</label>
            <label class="borrowed-book">3</label>
        </div>
        <div class="bottom-page-choice" id="page-choice">
            <button class="btn manager" id="manager-page-btn">管理员端</button>
            <button class="btn user" id="user-page-btn">用户端</button>
        </div>

    </div>
</div>
<%--我的欠费--%>
<div class="self-page-item" id="debt">
    <table class="debt-table">
        <tr>
            <th class="col0"></th>
            <th class="col1">序号</th>
            <th class="col2">书名</th>
            <th class="col3">作者</th>
            <th class="col4">借阅日期</th>
            <th class="col5">到期日期</th>
            <th class="col6">归还日期</th>
            <th class="col7">操作</th>
        </tr>
        <tr>
            <td><input type="checkBox"></td>
            <td>01</td>
            <td>《你是那人间四月天》</td>
            <td>林徽因</td>
            <td>2022.9.11</td>
            <td>2022.10.11</td>
            <td>2022.10.18</td>
            <td>
                <label class="action-label">逾期</label>
                <button class="action-btn" id="jiaofei2">缴费</button>
            </td>
        </tr>
        <tr>
            <td><input type="checkBox"></td>
            <td>02</td>
            <td>《文化苦旅》</td>
            <td>余秋雨</td>
            <td>2022.10.11</td>
            <td>2022.11.11</td>
            <td>2022.11.28</td>
            <td>
                <label class="action-label">逾期</label>
                <button class="action-btn" id="jiaofei1">缴费</button>
            </td>
        </tr>

    </table>
    <div class="select-btns">
        <%--        <button class="select-btn">缴费</button>--%>
    </div>

</div>

</div>
<script src="js/includePage.js"></script>
<script src="js/selfInfo.js"></script>
</body>
</html>
